<!--
 * @Descripttion: 系统计划任务配置
 * @version: 1.2
 * @Author: sakuya
 * @Date: 2021年7月7日09:28:32
 * @LastEditors: sakuya
 * @LastEditTime: 2021年7月10日20:56:47
-->

<template>
  <el-main>
    <el-row :gutter="15">
      <el-col
        :xl="6"
        :lg="6"
        :md="8"
        :sm="12"
        :xs="24"
        v-for="item in list"
        :key="item.id"
      >
        <el-card class="task task-item" shadow="hover">
          <h2>{{ item.description }}</h2>
          <ul>
            <li>
              <h4>执行类</h4>
              <p>{{ item.jobClassName }}</p>
            </li>
            <li>
              <h4>定时规则</h4>
              <p>{{ item.cronExpression }}</p>
            </li>
          </ul>
          <div class="bottom">
            <div class="state">
              <el-tag v-if="item.status == 0" size="small">执行中</el-tag>
              <el-tag v-if="item.status == 1" size="small" type="info"
                >停用</el-tag
              >
            </div>
            <div class="handler">
              <el-popconfirm
                title="确定立即执行吗？"
                @confirm="run(item)"
                v-if="item.status == 1"
              >
                <template #reference>
                  <el-button
                    type="primary"
                    icon="el-icon-caret-right"
                    circle
                  ></el-button>
                </template>
              </el-popconfirm>
              <el-popconfirm
                title="确定立即停用吗？"
                @confirm="pause(item)"
                v-if="item.status == 0"
              >
                <template #reference>
                  <el-button
                    type="primary"
                    icon="el-icon-close"
                    circle
                  ></el-button>
                </template>
              </el-popconfirm>
              <el-dropdown trigger="click">
                <el-button
                  type="primary"
                  icon="el-icon-more"
                  circle
                  plain
                ></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="edit(item)"
                      >编辑</el-dropdown-item
                    >
                    <!-- <el-dropdown-item @click="logs(item)"
                      >日志</el-dropdown-item
                    > -->
                    <el-dropdown-item @click="del(item)" divided
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
        <el-card class="task task-add" shadow="never" @click="add">
          <el-icon><el-icon-plus /></el-icon>
          <p>添加计划任务</p>
        </el-card>
      </el-col>
    </el-row>
  </el-main>

  <save-dialog
    v-if="dialog.save"
    ref="saveDialog"
    @success="handleSuccess"
    @closed="dialog.save = false"
  ></save-dialog>

  <el-drawer
    title="计划任务日志"
    v-model="dialog.logsVisible"
    :size="600"
    direction="rtl"
    destroy-on-close
  >
    <logs></logs>
  </el-drawer>
</template>

<script>
import saveDialog from './save'
import logs from './logs'

export default {
  name: 'task',
  components: {
    saveDialog,
    logs
  },
  provide () {
    return {
      list: this.list
    }
  },
  data () {
    return {
      dialog: {
        save: false,
        logsVisible: false
      },
      list: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      let { data } = await this.$API.task.getTaskList.get()
      console.log(data)
      this.list = data
    },
    add () {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open()
      })
    },
    edit (task) {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open('edit').setData(task)
      })
    },
    del (task) {
      this.$confirm(`确认删除 ${task.description} 计划任务吗？`, '提示', {
        type: 'warning',
        confirmButtonText: '删除',
        confirmButtonClass: 'el-button--danger'
      }).then(async () => {
        let res = await this.$API.task.deleteTask.post({ id: task.id })
        if (res.code == 200) {
          this.getList()
          this.$message.success("删除成功")
        }
      }).catch(() => {
        //取消
      })
    },
    logs () {
      this.dialog.logsVisible = true
    },
    // 执行
    async run (task) {
      let res = await this.$API.task.resumeTask.post({ id: task.id })
      if (res.code == 200) {
        this.getList()
        this.$message.success(`已成功执行计划任务：${task.description}`)
      }

    },
    // 暂停
    async pause (task) {
      let res = await this.$API.task.pauseTask.post({ id: task.id })
      if (res.code == 200) {
        this.getList()
        this.$message.success(`已成功暂停计划任务：${task.description}`)
      }
    },
    //本地更新数据
    handleSuccess () {
      this.getList()
    }
  }
}
</script>

<style scoped>
.task {
  height: 210px;
}
.task-item h2 {
  font-size: 15px;
  color: #3c4a54;
  padding-bottom: 15px;
}
.task-item li {
  list-style-type: none;
  margin-bottom: 10px;
}
.task-item li h4 {
  font-size: 12px;
  font-weight: normal;
  color: #999;
}
.task-item li p {
  margin-top: 5px;
}
.task-item .bottom {
  border-top: 1px solid #ebeef5;
  text-align: right;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: #999;
}
.task-add:hover {
  color: #409eff;
}
.task-add i {
  font-size: 30px;
}
.task-add p {
  font-size: 12px;
  margin-top: 20px;
}

.dark .task-item .bottom {
  border-color: var(--el-border-color-light);
}
</style>
